<template>
  <view class="messages-page">
    <!-- 消息列表 -->
    <view class="messages-list" v-if="messagesList.length > 0">
      <view 
        v-for="(message, index) in messagesList" 
        :key="index"
        class="message-card"
        @tap="readMessage(message)"
      >
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{ message.title }}</text>
            <text class="message-time">{{ message.time }}</text>
          </view>
          
          <text class="message-preview">{{ message.content }}</text>
          
          <view v-if="!message.read" class="unread-dot"></view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-icon">📬</view>
      <text class="empty-title">暂无消息</text>
      <text class="empty-subtitle">有新消息时会在这里显示</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const messagesList = ref([
  {
    id: 1,
    title: '欢迎加入袋子派~',
    content: '袋子派欢迎每个热心环保的人，与我们一同创造更可持续、更环保的未来。成为袋子派的一员，参与清洁地...',
    time: '2025-07-26',
    read: false
  }
])

const readMessage = (message) => {
  if (!message.read) {
    message.read = true
  }
  
  // 显示消息详情
  uni.showModal({
    title: message.title,
    content: message.content,
    showCancel: false,
    confirmText: '知道了'
  })
}
</script>

<style lang="scss" scoped>
.messages-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx 32rpx;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.message-card {
  background: white;
  border-radius: 16rpx;
  padding: 32rpx;
  position: relative;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.message-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
}

.message-content {
  position: relative;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.message-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.message-time {
  font-size: 22rpx;
  color: #999;
}

.message-preview {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rpx;
  height: 16rpx;
  background: #f44336;
  border-radius: 50%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
  opacity: 0.5;
}

.empty-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.empty-subtitle {
  font-size: 26rpx;
  color: #999;
}
</style>